<div class="status-spoiler {isStatusInNotification ? 'status-in-notification' : ''} {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
  <p>{@html massagedSpoilerText}</p>
</div>
<div class="status-spoiler-button {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
  <button id={elementId} type="button" >
    {spoilerShown ? 'intl.showLess' : 'intl.showMore'}
  </button>
</div>
{#if enableShortcuts}
<Shortcut scope={shortcutScope} key="x" on:pressed="toggleSpoilers()"/>
{/if}
<style>
  .status-spoiler {
    grid-area: spoiler;
    word-wrap: break-word;
    overflow: hidden;
    white-space: pre-wrap;
    font-size: 0.9em;
    margin: 10px 5px;
  }

  .status-spoiler.status-in-own-thread {
    font-size: 1.3em;
    margin: 20px 5px 10px;
  }

  .status-spoiler.status-in-notification {
    color: var(--very-deemphasized-text-color);
  }

  .status-spoiler-button {
    grid-area: spoiler-btn;
    margin: 10px 5px;
  }

  .status-spoiler-button.status-in-own-thread {
  }

  .status-spoiler-button button {
    padding: 5px 10px;
    font-size: 1.1em;
  }

  :global(.underline-links .status-spoiler a) {
    text-decoration: underline;
  }

</style>
<script>
  import Shortcut from '../shortcut/Shortcut.html'
  import { store } from '../../_store/store.js'
  import { registerClickDelegate } from '../../_utils/delegate.js'
  import { mark, stop } from '../../_utils/marks.js'
  import { emojifyText } from '../../_utils/emojifyText.js'
  import { on } from '../../_utils/eventBus.js'
  import escapeHtml from 'escape-html'

  export default {
    oncreate () {
      this.toggleSpoilers = this.toggleSpoilers.bind(this)
      const { elementId } = this.get()
      registerClickDelegate(this, elementId, () => this.toggleSpoilers())
      on('toggleAllSpoilers', this, this.toggleSpoilers)
    },
    store: () => store,
    components: {
      Shortcut
    },
    computed: {
      massagedSpoilerText: ({ spoilerText, originalStatusEmojis, $autoplayGifs }) => {
        spoilerText = escapeHtml(spoilerText)
        return emojifyText(spoilerText, originalStatusEmojis, $autoplayGifs)
      },
      elementId: ({ uuid }) => `spoiler-${uuid}`
    },
    methods: {
      toggleSpoilers (shown) {
        const { uuid } = this.get()
        const { spoilersShown, showAllSpoilers } = this.store.get()
        const currentValue = typeof spoilersShown[uuid] === 'undefined' ? !!showAllSpoilers : spoilersShown[uuid]
        spoilersShown[uuid] = typeof shown === 'undefined' ? !currentValue : !!shown
        this.store.set({ spoilersShown })
        requestAnimationFrame(() => {
          mark('clickSpoilerButton')
          this.fire('recalculateHeight')
          stop('clickSpoilerButton')
        })
        return true
      }
    }
  }
</script>
